// 响应式断点
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

.container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
  
  @include respond-to('sm') {
    max-width: 540px;
  }
  
  @include respond-to('md') {
    max-width: 720px;
  }
  
  @include respond-to('lg') {
    max-width: 960px;
  }
  
  @include respond-to('xl') {
    max-width: 1140px;
  }
}